<template>
  <div class="order-summary-container">
    <div style="margin: 30px 40px">
      <total :total="summaryData.total"/>
    </div>
    <div style="margin-top:100px">
      <h3 style="padding:10px 30px">订单金额与数量</h3>
      <num-line :chart-data="summaryData" v-if="disnumLine"/>
    </div>
  </div>
</template>

<script>
import { getOrderSummary } from '@/api/order'
import { total, numLine } from './components'


export default {
  name: 'ordersummary',
  components: {
    total,
    numLine
  },
  data() {
    return {
      summaryData: {},
      disnumLine: false
    }
  },
  mounted() {
    this.getOrderSummary();
  },
  methods: {
    /**
     * 获取订单概述的数据
     */
    getOrderSummary() {
      getOrderSummary({ key: this.$store.state.app.activeApp.saa_key }).then(response => {
        if(response.status === 200){
          this.summaryData = response.data;
          this.disnumLine = true;
        }else if(response.status === 204){
          this.summaryData = {};
        }else{
          this.$message.error(response.message);
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.order-summary-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
</style>